
// 首页业务

const user = localStorage.getItem('user')
document.querySelector('.username').innerHTML = user

//退出登录按钮
const btnLoginout = document.querySelector('#logout')
btnLoginout.addEventListener('click', function () {
  loginOut()
})
//渲染统计数据
async function getData() {
  const { data: {
    groupData, overview, year, salaryData, provinceData
  } } = await axios('/dashboard')
  renderOverview(overview)
  renderYearSalary(year)
  renderSalary(salaryData)
  renderGroup(groupData)
  // console.log(groupData)
  document.querySelector('.btn-blue').click()
  renderGender(salaryData)
  renderProvince(provinceData)
}

//概览业务 -overview
function renderOverview(overview) {
  Object.keys(overview).forEach((key) => {
    document.querySelector(`.${key}`).innerHTML = overview[key]
  })
}

//薪资走向 - year
function renderYearSalary(year) {
  const myChart = echarts.init(document.querySelector('#line'))
  // console.log(year)
  const month = year.map(item => item.month)
  const salary = year.map(item => item.salary)
  const option = {
    title: {
      show: true,
      text: '2022全学科薪资走势',
      textStyle: {
        fontSize: 16,
        color: '#14305a'
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: month,
      axisLine: {
        lineStyle: {
          color: '#999',
          style: 'dashed'
        }
      }
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: salary,
        type: 'line',
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: '#dcf2fb' // 0% 处的颜色
            }, {
              offset: 1, color: '#fff' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          }
        },
        smooth: true,
        //标记大小
        symbolSize: 8,
        //线条样式
        lineStyle: {
          width: 6,
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [{
              offset: 0, color: '#408df6' // 0% 处的颜色
            }, {
              offset: 1, color: '#526bee' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          }
        }
      }
    ]
  };
  myChart.setOption(option)
}

//薪资分布 - salaryData
function renderSalary(salaryData) {
  const myChart = echarts.init(document.querySelector('#salary'))
  const data1 = salaryData.map(item => {
    return { value: item.g_count + item.b_count, name: item.label }
  })
  const option = {
    title: {
      text: '班级薪资分布',
      left: 10,
      top: 10
    },
    tooltip: {
      trigger: 'item',
      formatter: '班级薪资分布'
    },
    legend: {
      left: 'center',
      bottom: 30
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['45%', '60%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 50,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: true,
          // position: 'inside'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 10,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: true
        },
        data: data1
        //  [
        //   { value: 1048, name: 'Search Engine' },
        //   { value: 735, name: 'Direct' },
        //   { value: 580, name: 'Email' },
        //   { value: 484, name: 'Union Ads' },
        //   { value: 300, name: 'Video Ads' }
        // ]
      }
    ]
  };
  myChart.setOption(option)
}

//分组数据 - groupData
function renderGroup(groupData) {
  // console.log(groupData)
  // 分组tab栏
  let a
  const btnS = document.querySelector('#btns')

  btnS.addEventListener('click', function (e) {
    if (e.target.classList.contains('btn')) {
      document.querySelector('.btn-blue').classList.remove('btn-blue')
      e.target.classList.add('btn-blue')
      a = document.querySelector('.btn-blue').textContent
      // console.log(a)

      // console.log(groupData)
      const Data = groupData[a].map(item => {
        return [
          item.name,
          item.hope_salary,
          item.salary
        ]
      })
      // console.log(Data)
      const myChart = echarts.init(document.querySelector('#lines'))
      const option = {
        legend: {},
        tooltip: {},
        dataset: {
          source: Data
        },
        xAxis: {
          type: 'category',
          xAxisLine: {
            show: true, // 显示横向网格线
            lineStyle: {
              type: 'dashed' // 设置为虚线
            }
          }
        },
        yAxis: {
          splitLine: {
            show: true, // 显示纵向网格线
            lineStyle: {
              type: 'dashed' // 设置为虚线
            }
          }
        },
        series: [
          {
            type: 'bar',
            itemStyle: {
              // 第一组柱子的渐变色
              color: {
                type: 'linear',
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  { offset: 0, color: '#d1f5e8' },
                  { offset: 1, color: '#3de9ab' }
                ]
              }
            }
          },
          {
            type: 'bar',
            itemStyle: {
              // 第二组柱子的渐变色
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  { offset: 0, color: '#53b0ff' },
                  { offset: 1, color: '#d9ebfc' }
                ]
              }
            }
          }
        ] // 只保留两个系列
      };
      myChart.setOption(option)

    }
  })


}

//男女数据 -salaryDate
function renderGender(salaryData) {
  // console.log(salaryData)
  const dataG = salaryData.map(item => {
    return {
      name: item.label,
      value: item.g_count
    }
  })
  // console.log(dataG)
  const dataB=salaryData.map(item=>{
    return{
      name:item.label,
      value:item.b_count
    }
  })
  // console.log(dataB)
  const myChart = echarts.init(document.querySelector('#gender'))
  const datas = [dataB,dataG
    // [
    //   { name: '圣彼得堡来客', value: 5.6 },
    //   { name: '陀思妥耶夫斯基全集', value: 1 },
    //   { name: '史记精注全译（全6册）', value: 0.8 },
    //   { name: '加德纳艺术通史', value: 0.5 },
    // ],
    // [
    //   { name: '银河帝国5：迈向基地', value: 3.8 },
    //   { name: '俞军产品方法论', value: 2.3 },
    //   { name: '艺术的逃难', value: 2.2 },
    //   { name: '第一次世界大战回忆录（全五卷）', value: 1.3 },
    // ]
  ];
  option = {
    title: [{
      text: '男女薪资分布',
      left: 10,
      top: 10
    }, {
      text: '男',
      left: 'center',
      top: '45%',
      textStyle: {
        fontSize: 14
      }
    }, {
      text: '女',
      left: 'center',
      top: '90%',
      textStyle: {
        fontSize: 14
      }
    }],
    series: datas.map(function (data, idx) {
      return {
        type: 'pie',
        radius: [45, 65],
        top: idx * 45 + 5 + '%',
        height: '50%',
        left: 'center',
        width: 300,
        label: {
          alignTo: 'edge',
          minMargin: 5,
          edgeDistance: 10,
          lineHeight: 15,
        },
        labelLine: {
          length: 5,
          length2: 0,
          maxSurfaceAngle: 80
        },
        data: data,
        color: ['#fda224', '#5097ff', '#3abcfa', '#34d39a']
      };
    })
  };

  myChart.setOption(option)

}

//地图数据渲染
function renderProvince(provinceData) {
  // console.log(provinceData)
  const dom = document.querySelector('#map')
  const myEchart = echarts.init(dom)
  const dataList = [
    { name: '南海诸岛', value: 0 },
    { name: '北京', value: 0 },
    { name: '天津', value: 0 },
    { name: '上海', value: 0 },
    { name: '重庆', value: 0 },
    { name: '河北', value: 0 },
    { name: '河南', value: 0 },
    { name: '云南', value: 0 },
    { name: '辽宁', value: 0 },
    { name: '黑龙江', value: 0 },
    { name: '湖南', value: 0 },
    { name: '安徽', value: 0 },
    { name: '山东', value: 0 },
    { name: '新疆', value: 0 },
    { name: '江苏', value: 0 },
    { name: '浙江', value: 0 },
    { name: '江西', value: 0 },
    { name: '湖北', value: 0 },
    { name: '广西', value: 0 },
    { name: '甘肃', value: 0 },
    { name: '山西', value: 0 },
    { name: '内蒙古', value: 0 },
    { name: '陕西', value: 0 },
    { name: '吉林', value: 0 },
    { name: '福建', value: 0 },
    { name: '贵州', value: 0 },
    { name: '广东', value: 0 },
    { name: '青海', value: 0 },
    { name: '西藏', value: 0 },
    { name: '四川', value: 0 },
    { name: '宁夏', value: 0 },
    { name: '海南', value: 0 },
    { name: '台湾', value: 0 },
    { name: '香港', value: 0 },
    { name: '澳门', value: 0 },
  ]

  // 筛选
  // dataList.forEach(item => {
  //   const res = provinceData.find(a => {
  //     return a.name.includes(item.name)
  //   })
  //   console.log(res)
  //   if (res !== undefined) {
  //     item.value = res.value
  //   }
  // })

  //筛选2
  provinceData.forEach(itemp=>{
    dataList.forEach(iteml=>{
      if(itemp.name.includes(iteml.name)){
        iteml.value+=itemp.value
      }
    })
  })
  
 

  // console.log(dataList)

  const option = {
    title: {
      text: '籍贯分布',
      top: 10,
      left: 10,
      textStyle: {
        fontSize: 16,
      },
    },
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c} 位学员',
      borderColor: 'transparent',
      backgroundColor: 'rgba(0,0,0,0.5)',
      textStyle: {
        color: '#fff',
      },
    },
    visualMap: {
      min: 0,
      max: 6,
      left: 'left',
      bottom: '20',
      text: ['6', '0'],
      inRange: {
        color: ['#ffffff', '#0075F0'],
      },
      show: true,
      left: 40,
    },
    geo: {
      map: 'china',
      roam: false,
      zoom: 1.0,
      label: {
        normal: {
          show: true,
          fontSize: '10',
          color: 'rgba(0,0,0,0.7)',
        },
      },
      itemStyle: {
        normal: {
          borderColor: 'rgba(0, 0, 0, 0.2)',
          color: '#e0ffff',
        },
        emphasis: {
          areaColor: '#34D39A',
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          shadowBlur: 20,
          borderWidth: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
    },
    series: [
      {
        name: '籍贯分布',
        type: 'map',
        geoIndex: 0,
        data: dataList,
      },
    ],
  }
  myEchart.setOption(option)
}

getData()